layui.define(['layer', 'utils'], function (exports) {
    var $ = layui.$,
        utils = layui.utils;
    var slidePanelTemplate = '<div class="slide-panel-mask">' +
        '   <div class="slide-panel-container">' +
        '       <div class="resize-bar"><span></span></div>' +
        '       <div class="container-help">' +
        '           <div class="btn-bar">' +
        '               <button class="layui-btn layui-btn-xs layui-bg-lightblue slide-panel-close">关闭</button>' +
        '           </div>' +
        '           <div class="container"></div>' +
        '       </div>' +
    '           <div class="container-inner-mask"></div>' +
        '   </div>' +
        '</div>'
    var defaultOptions = {
        width: 1000,
        position: 'right'
    }
    var slidePanel = {
        $el: null,
        dragging: false,
        position: 'right',
        desPointX: 0,
        orgPointX: 0,
        size: 0,
        minSize: 0,
        maxSize: Infinity,
        createPanel: function(options) {
            this.$el = $(slidePanelTemplate)
            var $slidePanelContainer  = this.$el.find('.slide-panel-container')
            var $resizeBar = this.$el.find('.resize-bar')
            var $btnBar = this.$el.find('.btn-bar')
            var panelContainerStyle = {
                width: options.width + 'px'
            }
            if (options.position === 'right') {
                panelContainerStyle.left = 'auto'
                panelContainerStyle.right = 0
                $slidePanelContainer.addClass('right-side')
            } else {
                panelContainerStyle.left = 0
                panelContainerStyle.right =  'auto'
                $slidePanelContainer.addClass('left-side')
            }
            $slidePanelContainer.css(panelContainerStyle)
            this.$el.find('.container').html(options.content)
            this.$el.appendTo('body')
            var _this = this
            $resizeBar.on('mousedown', function (event) {_this.handleMouseDown(event)})
            $btnBar.on('click', '.slide-panel-close', function (event) {_this.hidePanel()})
        },
        showPanel: function (options) {
            var opt = {}
            utils.copyObject(opt, defaultOptions)
            utils.copyObject(opt, options)
            this.position = opt.position
            this.size = opt.width

            if (this.$el) {
                this.$el.remove()
                this.$el = null
            }
            this.createPanel(opt)
            // if (!this.$el) {
            //     this.createPanel(opt)
            // }
        },
        hidePanel: function () {
            if (this.$el) {
                this.$el.find('.resize-bar').off('mousedown')
                this.$el.remove()
                this.$el = null
            }
        },
        computeSize: function() {
            let moveXSize = this.desPointX - this.orgPointX;
            switch (this.position) {
                case 'left':
                    this.size += moveXSize;
                    break;
                case 'right':
                    this.size -= moveXSize;
                    break;
            }
            if (this.size < this.minSize) {
                this.size = this.minSize;
            }
            if (this.size > this.maxSize) {
                this.size = this.maxSize;
            }
            var $slidePanelContainer = this.$el.find('.slide-panel-container')
            var panelContainerStyle = {width: this.size + 'px'}
            $slidePanelContainer.css(panelContainerStyle)
        },
        handleMouseDown: function (event) {
            this.$el.addClass('show')
            this.$el.find('.container-inner-mask').show()
            this.dragging = true;
            this.orgPointX = event.clientX;
            var _this = this
            $(window).on('mousemove', function (event) {_this.handleSpliterDragging(event)});
            $(window).on('mouseup', function (event) {_this.handleDragEnd(event)});
        },
        handleSpliterDragging: function (event) {
            this.desPointX = event.clientX;
            this.computeSize();
            this.orgPointX = this.desPointX;
        },
        handleDragEnd: function () {
            this.$el.removeClass('show')
            this.$el.find('.container-inner-mask').hide()
            var _this = this
            this.dragging = false;
            setTimeout(function() {
                $(window).off('mousemove');
                $(window).off('mouseup');
            });
        }
    }

    layui.link(layui.cache.base + 'slidePanel/slidePanel.css');
    exports('slidePanel', slidePanel)
})
